import React from 'react';
import { Button } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import { isImg } from './utils';

class Banner extends React.PureComponent {
    F_GoPageEnd = () => {
        this.pageEnd.scrollIntoView({ behavior: 'smooth' });
    }
    render() {
        return (<>
            <div className="banner0">
                <QueueAnim
                    key="QueueAnim"
                    type={['bottom', 'top']}
                    delay={200}
                    className="banner0-text-wrapper"
                >
                    <div key="title" className="banner0-title">
                        <img src="/images/LogoMSRM3.png" width="100%" alt="img" />
                    </div>
                    <div key="content" className="banner0-content">   
                        <span style={{whiteSpace: 'nowrap'}}>自研铸魂，</span><span style={{whiteSpace: 'nowrap'}}>轻翼强擎；</span><br/><span style={{whiteSpace: 'nowrap'}}>极简部署，</span><span style={{whiteSpace: 'nowrap'}}>万网在握！</span>
                    </div>
                    <Button ghost key="button" className="banner0-button" onClick={this.F_GoPageEnd}>
                        开始探索
                    </Button>
                </QueueAnim>
                <TweenOne
                    animation={{
                        y: '-=20',
                        yoyo: true,
                        repeat: -1,
                        duration: 1000,
                    }}
                    className="banner0-icon"
                    key="icon"
                >
                    <DownOutlined onClick={this.F_GoPageEnd} />
                </TweenOne>
            </div><div ref={dom => this.pageEnd = dom} /></>
        );
    }
}
export default Banner;
